<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>前端面试 | V前端技术笔记</title>
    <meta name="generator" content="VuePress 1.5.2">
    
    <meta name="description" content="V前端技术笔记">
    <link rel="preload" href="/vv/assets/css/0.styles.4e101ab7.css" as="style"><link rel="preload" href="/vv/assets/js/app.ae00cca3.js" as="script"><link rel="preload" href="/vv/assets/js/2.5eb07d41.js" as="script"><link rel="preload" href="/vv/assets/js/8.6d0594c7.js" as="script"><link rel="prefetch" href="/vv/assets/js/10.e0bab49e.js"><link rel="prefetch" href="/vv/assets/js/11.f6ed8906.js"><link rel="prefetch" href="/vv/assets/js/12.aaeaa660.js"><link rel="prefetch" href="/vv/assets/js/3.b85f619c.js"><link rel="prefetch" href="/vv/assets/js/4.94268aed.js"><link rel="prefetch" href="/vv/assets/js/5.b71de90c.js"><link rel="prefetch" href="/vv/assets/js/6.4e4b8e3f.js"><link rel="prefetch" href="/vv/assets/js/7.78b8735e.js"><link rel="prefetch" href="/vv/assets/js/9.3be1daac.js">
    <link rel="stylesheet" href="/vv/assets/css/0.styles.4e101ab7.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vv/" class="home-link router-link-active"><!----> <span class="site-name">V前端技术笔记</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/vv/html/" class="nav-link">
  HTML
</a></div><div class="nav-item"><a href="/vv/css/" class="nav-link">
  CSS
</a></div><div class="nav-item"><a href="/vv/js/" class="nav-link">
  JavaScript
</a></div><div class="nav-item"><a href="/vv/vue/" class="nav-link">
  Vue
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Language Menu" class="dropdown-title"><span class="title">其他</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/vv/webpack/" class="nav-link">
  Webpack
</a></li><li class="dropdown-item"><!----> <a href="/vv/network/" class="nav-link">
  网络
</a></li><li class="dropdown-item"><!----> <a href="/vv/interview/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  面试题
</a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/vv/html/" class="nav-link">
  HTML
</a></div><div class="nav-item"><a href="/vv/css/" class="nav-link">
  CSS
</a></div><div class="nav-item"><a href="/vv/js/" class="nav-link">
  JavaScript
</a></div><div class="nav-item"><a href="/vv/vue/" class="nav-link">
  Vue
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Language Menu" class="dropdown-title"><span class="title">其他</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/vv/webpack/" class="nav-link">
  Webpack
</a></li><li class="dropdown-item"><!----> <a href="/vv/network/" class="nav-link">
  网络
</a></li><li class="dropdown-item"><!----> <a href="/vv/interview/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  面试题
</a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>前端面试</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/vv/interview/#html-css" class="sidebar-link">HTML&amp;CSS</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vv/interview/#_1-浏览器内核" class="sidebar-link">1.浏览器内核</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_2-盒模型" class="sidebar-link">2.盒模型</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_3-flex布局" class="sidebar-link">3.flex布局</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_4-两-三栏布局" class="sidebar-link">4.两/三栏布局</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_5-水平-垂直居中" class="sidebar-link">5.水平/垂直居中</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_6-清除浮动；" class="sidebar-link">6.清除浮动；</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#bfc-格式化上下文" class="sidebar-link">BFC: 格式化上下文</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_7-css3动画、h5新特性。" class="sidebar-link">7.css3动画、H5新特性。</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_8-html标签类型？" class="sidebar-link">8.Html标签类型？</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_9-标签语义化的优点" class="sidebar-link">9.标签语义化的优点</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_10-css样式表类型" class="sidebar-link">10.CSS样式表类型</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_11-css选择器" class="sidebar-link">11.css选择器</a></li></ul></li><li><a href="/vv/interview/#javascript" class="sidebar-link">JavaScript</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vv/interview/#_1-js的数据类型，怎么存储？" class="sidebar-link">1.js的数据类型，怎么存储？</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_2-js的数据类型转换？" class="sidebar-link">2.js的数据类型转换？</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_3-js数据类型判断" class="sidebar-link">3.js数据类型判断</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_4-js的作用域和作用域链" class="sidebar-link">4. js的作用域和作用域链</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_5-js创建对象的几种方式" class="sidebar-link">5.js创建对象的几种方式</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_6-js继承的几种实现方式？" class="sidebar-link">6.js继承的几种实现方式？</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_7-谈谈你对this、call、apply和bind的理解" class="sidebar-link">7. 谈谈你对this、call、apply和bind的理解</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_8-js-获取原型的方法？" class="sidebar-link">8.js 获取原型的方法？</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_9-什么是闭包，为什么要用它？" class="sidebar-link">9.什么是闭包，为什么要用它？</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_10-bom和dom" class="sidebar-link">10.BOM和DOM</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_11-三种事件模型是什么？" class="sidebar-link">11. 三种事件模型是什么？</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_12-事件委托是什么？" class="sidebar-link">12.事件委托是什么？</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_13-事件传播是什么？" class="sidebar-link">13.事件传播是什么？</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_14-事件捕获是什么？" class="sidebar-link">14.事件捕获是什么？</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_15-什么是事件冒泡？" class="sidebar-link">15.什么是事件冒泡？</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_16-dom操作" class="sidebar-link">16.DOM操作</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_17-js数组操作" class="sidebar-link">17.js数组操作</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_18-js对象操作" class="sidebar-link">18.js对象操作</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_19-ajax" class="sidebar-link">19.Ajax</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_20-es6新特性" class="sidebar-link">20.es6新特性</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_21-var-let-const的区别" class="sidebar-link">21.var ,let,const的区别</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_22-回调函数" class="sidebar-link">22.回调函数</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_23-promise是什么？可以手写promise" class="sidebar-link">23.Promise是什么？可以手写Promise</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_24-js的节流和防抖" class="sidebar-link">24.js的节流和防抖</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_25-什么是设计模式？" class="sidebar-link">25.什么是设计模式？</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_26-设计模式的类型" class="sidebar-link">26.设计模式的类型</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_27-浅拷贝和深拷贝" class="sidebar-link">27.浅拷贝和深拷贝</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_28-数组排序" class="sidebar-link">28.数组排序</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_29-数组去重" class="sidebar-link">29.数组去重</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_30-冒泡排序" class="sidebar-link">30.冒泡排序</a></li></ul></li><li><a href="/vv/interview/#vue" class="sidebar-link">Vue</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vv/interview/#_1-vue的优点" class="sidebar-link">1.vue的优点</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_2-请详细说下你对vue生命周期的理解" class="sidebar-link">2.请详细说下你对vue生命周期的理解</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_3-为什么vue组件中data必须是一个函数" class="sidebar-link">3.为什么vue组件中data必须是一个函数</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_4-vue数据双向绑定原理；" class="sidebar-link">4.vue数据双向绑定原理；</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_5-vue-computed原理、computed和watch的区别；" class="sidebar-link">5.vue computed原理、computed和watch的区别；</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_6-mvvm模式、mvc模式理解；" class="sidebar-link">6.mvvm模式、mvc模式理解；</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_5-v-on可以监听多个方法吗？" class="sidebar-link">5.v-on可以监听多个方法吗？</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_6-vue如何获取dom" class="sidebar-link">6.vue如何获取dom</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_7-assets和static的区别" class="sidebar-link">7.assets和static的区别</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_8-vue初始化页面的闪动" class="sidebar-link">8.vue初始化页面的闪动</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_9-vuex中有几个核心属性，分别是什么？" class="sidebar-link">9.vuex中有几个核心属性，分别是什么？</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_10-vuex中的数据在页面刷新后数据消失" class="sidebar-link">10.vuex中的数据在页面刷新后数据消失</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_11-vue-router" class="sidebar-link">11.vue-router</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_12-vue-router导航钩子" class="sidebar-link">12.vue-router导航钩子</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_13-vue路由传参" class="sidebar-link">13.vue路由传参</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_14-router和route的区别" class="sidebar-link">14.router和route的区别</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_15-vue两大核心" class="sidebar-link">15.Vue两大核心</a></li></ul></li><li><a href="/vv/interview/#网络" class="sidebar-link">网络</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vv/interview/#_1-http1-http2-https、常见的http状态码；" class="sidebar-link">1.HTTP1, HTTP2, HTTPS、常见的http状态码；</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_2-浏览从输入网址到回车发生了什么；" class="sidebar-link">2.浏览从输入网址到回车发生了什么；</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_3-前端安全（csrf、xss）" class="sidebar-link">3.前端安全（CSRF、XSS）</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_4-前端跨域、浏览器缓存、cookie-session-token-localstorage-sessionstorage；" class="sidebar-link">4.前端跨域、浏览器缓存、cookie, session, token, localstorage, sessionstorage；</a></li><li class="sidebar-sub-header"><a href="/vv/interview/#_5-tcp连接-三次握手-四次挥手" class="sidebar-link">5.TCP连接(三次握手, 四次挥手)</a></li></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="前端面试"><a href="#前端面试" class="header-anchor">#</a> 前端面试</h1> <h2 id="html-css"><a href="#html-css" class="header-anchor">#</a> HTML&amp;CSS</h2> <h3 id="_1-浏览器内核"><a href="#_1-浏览器内核" class="header-anchor">#</a> 1.浏览器内核</h3> <ul><li><strong>IE浏览器内核</strong>：Trident内核，也是俗称的<strong>IE内核</strong>；</li> <li><strong>Chrome浏览器内核</strong>：统称为Chromium内核或Chrome内核，以前是<strong>Webkit内核</strong>，现在是Blink内核；</li> <li><strong>Firefox浏览器内核</strong>：<strong>Gecko内核</strong>，俗称Firefox内核；</li> <li><strong>Safari浏览器内核</strong>：<strong>Webkit内核</strong>；</li> <li><strong>Opera浏览器内核</strong>：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；</li> <li><strong>360浏览器、猎豹浏览器内核</strong>：<strong>IE+Chrome双内核</strong>；</li> <li><strong>搜狗、遨游、QQ浏览器内核</strong>：<strong>Trident（兼容模式）+Webkit（高速模式）</strong>；</li> <li><strong>百度浏览器、世界之窗内核</strong>：IE内核；</li> <li><strong>2345浏览器内核</strong>：以前是IE内核，现在也是<strong>IE+Chrome双内核</strong>；</li></ul> <h3 id="_2-盒模型"><a href="#_2-盒模型" class="header-anchor">#</a> 2.盒模型</h3> <ul><li>标准盒模型：<br> <strong>width=content.width  height = content.height</strong></li> <li>IE 盒子模型(怪异盒模型):<br> <strong>width = border.width + padding.width + contetn.width;height = border.height+ padding.height+ contetn.height</strong></li></ul> <h3 id="_3-flex布局"><a href="#_3-flex布局" class="header-anchor">#</a> 3.flex布局</h3> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.parent</span><span class="token punctuation">{</span>
    <span class="token property">display</span><span class="token punctuation">:</span>flex<span class="token punctuation">;</span>
    <span class="token property">flex-direction</span><span class="token punctuation">:</span>column<span class="token punctuation">;</span><span class="token comment">/*row*/</span>
<span class="token punctuation">}</span>
<span class="token selector">.children</span><span class="token punctuation">{</span>
    <span class="token property">flex</span><span class="token punctuation">:</span>1<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="_4-两-三栏布局"><a href="#_4-两-三栏布局" class="header-anchor">#</a> 4.两/三栏布局</h3> <div class="language-css line-numbers-mode"><pre class="language-css"><code>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="_5-水平-垂直居中"><a href="#_5-水平-垂直居中" class="header-anchor">#</a> 5.水平/垂直居中</h3> <ul><li>margin:0 auto</li> <li>父元素relative 子元素absolute  transfrom：translate（-50%，-50%）</li> <li>flex布局</li> <li>display：table-cell</li></ul> <h3 id="_6-清除浮动；"><a href="#_6-清除浮动；" class="header-anchor">#</a> 6.清除浮动；</h3> <p>清除浮动：</p> <ul><li>父元素设置overflow：hidden</li> <li>在浮动的元素下面使用一个空元素</li> <li>伪元素:after   clear:both</li></ul> <h3 id="bfc-格式化上下文"><a href="#bfc-格式化上下文" class="header-anchor">#</a> BFC: 格式化上下文</h3> <p><strong>二、形成BFC的条件</strong></p> <ul><li>浮动元素，float 除 none 以外的值；</li> <li>定位元素，position（absolute，fixed）；</li> <li>display 为以下其中之一的值 inline-block，table-cell，table-caption；</li> <li>overflow 除了 visible 以外的值（hidden，auto，scroll）；</li></ul> <p><strong>三、BFC的特性</strong></p> <ul><li>内部的Box会在垂直方向上一个接一个的放置。</li> <li>垂直方向上的距离由margin决定</li> <li>bfc的区域不会与float的元素区域重叠。</li> <li>计算bfc的高度时，浮动元素也参与计算</li> <li>bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素</li></ul> <h3 id="_7-css3动画、h5新特性。"><a href="#_7-css3动画、h5新特性。" class="header-anchor">#</a> 7.css3动画、H5新特性。</h3> <p>css 动画：animation动画  transition过度
H5 新特性</p> <ol><li>语义化标签：header footer section nav aside article</li> <li>增强型表单：input 的多个type</li> <li>新增表单元素：datalist keygen output</li> <li>新增表单属性：placehoder required min max</li> <li>音频视频：audio video</li> <li>canvas</li> <li>地理定位：Geolocation  Navigator.geolocation</li> <li>拖拽</li> <li>本地缓存：localStorage sessionStorage</li> <li>新事件：onresize ondrag onscorll onmousewheel onerror onplay onpause</li> <li>WebSocket</li></ol> <h3 id="_8-html标签类型？"><a href="#_8-html标签类型？" class="header-anchor">#</a> 8.Html标签类型？</h3> <ul><li>块级元素</li> <li>行内元素</li> <li>行内块元素</li></ul> <h3 id="_9-标签语义化的优点"><a href="#_9-标签语义化的优点" class="header-anchor">#</a> 9.标签语义化的优点</h3> <ul><li>html结构清晰</li> <li>代码可读性好</li> <li>无障碍阅读</li> <li>搜索引擎可根据标签的语言确定上下文和权重问题</li> <li>移动设备能更完美的展示页面</li> <li>便于团队维护开发</li></ul> <h3 id="_10-css样式表类型"><a href="#_10-css样式表类型" class="header-anchor">#</a> 10.CSS样式表类型</h3> <ol><li>内部样式表</li> <li>外部样式表</li> <li>内联样式表</li></ol> <h3 id="_11-css选择器"><a href="#_11-css选择器" class="header-anchor">#</a> 11.css选择器</h3> <ol><li>class选择器</li> <li>id选择器</li> <li>*通配符选择器</li> <li>包含选择器</li> <li>伪类选择器</li> <li>伪对象选择器</li> <li>群组选择器</li></ol> <h2 id="javascript"><a href="#javascript" class="header-anchor">#</a> JavaScript</h2> <h3 id="_1-js的数据类型，怎么存储？"><a href="#_1-js的数据类型，怎么存储？" class="header-anchor">#</a> 1.js的数据类型，怎么存储？</h3> <p>​  + 基本数据类型：String  Boolean Null Number Undefined<br>
​  + 引用数据类型：Object Symbol</p> <blockquote><p>原始数据类型：<strong>直接存储在栈（stack）中，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储。</strong></p> <p>引用数据类型：<strong>同时存储在栈（stack）和堆（heap）中，占据空间大、大小不固定。引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。</strong></p></blockquote> <h3 id="_2-js的数据类型转换？"><a href="#_2-js的数据类型转换？" class="header-anchor">#</a> 2.js的数据类型转换？</h3> <ul><li>转换为布尔值（Boolean() 方法）</li> <li>转换为数字（Number()、parseInt()、parseFloat() 方法）</li> <li>转换为字符串（.toString()、String() 方法）</li></ul> <h3 id="_3-js数据类型判断"><a href="#_3-js数据类型判断" class="header-anchor">#</a> 3.js数据类型判断</h3> <ol><li>typeof <strong>对象都会返回 object</strong></li> <li>instanceof  <strong>instanceof可以精准判断引用数据类型（Array，Function，Object）</strong></li> <li>constructor <strong>获取类型的原型</strong></li> <li>Object.prototype.toString.call() <strong>使用 Object 对象的原型方法 toString</strong></li></ol> <h3 id="_4-js的作用域和作用域链"><a href="#_4-js的作用域和作用域链" class="header-anchor">#</a> 4. js的作用域和作用域链</h3> <blockquote><p><strong>作用域：</strong> 作用域是定义变量的区域，它有一套访问变量的规则，这套规则来管理浏览器引擎如何在当前作用域以及嵌套的作用域中根据变量（标识符）进行变量查找。</p> <p><strong>作用域链：</strong> 作用域链的作用是保证对执行环境有权访问的所有变量和函数的有序访问，通过作用域链，我们可以访问到外层环境的变量和函数。</p></blockquote> <h3 id="_5-js创建对象的几种方式"><a href="#_5-js创建对象的几种方式" class="header-anchor">#</a> 5.js创建对象的几种方式</h3> <p><strong>除去字面量创建</strong></p> <ol><li>工厂模式
<ul><li>优点：<strong>解决了创建多个相似对象时，代码的复用问题</strong></li> <li>缺点：<strong>使用工厂模式创建的对象，没有解决对象识别的问题（就是怎样知道一个对象的类型是什么）</strong></li></ul></li></ol> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">//1.工厂模式</span>
<span class="token keyword">function</span> <span class="token function">Person</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> sex<span class="token punctuation">,</span> age</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">var</span> o <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Object</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    o<span class="token punctuation">.</span>name <span class="token operator">=</span> name<span class="token punctuation">;</span>
    o<span class="token punctuation">.</span>sex <span class="token operator">=</span> sex<span class="token punctuation">;</span>
    o<span class="token punctuation">.</span>age <span class="token operator">=</span> age<span class="token punctuation">;</span>
    o<span class="token punctuation">.</span><span class="token function-variable function">sayName</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> o<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">var</span> createPerson <span class="token operator">=</span> <span class="token function">Person</span><span class="token punctuation">(</span><span class="token string">&quot;工厂函数&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;man&quot;</span><span class="token punctuation">,</span> <span class="token number">23</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
createPerson<span class="token punctuation">.</span><span class="token function">sayName</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><ol start="2"><li>构造函数模式
<ul><li>优点：<strong>解决了工厂模式中对象类型无法识别的问题，并且创建自定义的构造函数意味着将来可以将它的实例标	识为一种特定的类型。</strong></li> <li>缺点：<strong>我们知道 ECMAScript 中的函数是对象，在使用构造函数创建对象时，每个方法都会在实例对象中重	新创	建一遍。拿上面的例子举例，这意味着每创建一个对象，我们就会创建一个 sayName 函数的实例，但	它们其实	做的都是同样的工作，因此这样便会造成内存的浪费。</strong></li></ul></li></ol> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">//2.构造函数模式</span>
<span class="token keyword">function</span> <span class="token function">Person</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> sex<span class="token punctuation">,</span> age</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>sex <span class="token operator">=</span> sex<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>age <span class="token operator">=</span> age<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function-variable function">sayName</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">var</span> createPerson <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token string">&quot;构造函数&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;man&quot;</span><span class="token punctuation">,</span> <span class="token number">23</span><span class="token punctuation">)</span>
createPerson<span class="token punctuation">.</span><span class="token function">sayName</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><ol start="3"><li>原型模式
<ul><li>优点：<strong>解决了构造函数模式中多次创建相同函数对象的问题，所有的实例可以共享同一组属性和函数。</strong></li> <li>缺点：
<ol><li><strong>首先第一个问题是原型模式省略了构造函数模式传递初始化参数的过程，所有的实例在默认情况下都会取得默认的属性值，会在一定程度上造成不方便。</strong></li> <li><strong>因为所有的实例都是共享一组属性，对于包含基本值的属性来说没有问题，但是对于包含引用类型的值来说（例如数组对象），所有的实例都是对同一个引用类型进行操作，那么属性的操作就不是独立的，最后导致读写的混乱。我们创建的实例一般都是要有属于自己的全部属性的，因此单独使用原型模式的情况是很少存在的。</strong></li></ol></li></ul></li></ol> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">//3.原型模式</span>
<span class="token keyword">function</span> <span class="token function">Person</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token punctuation">}</span>
<span class="token class-name">Person</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">'原型模式'</span><span class="token punctuation">;</span>
<span class="token class-name">Person</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>sex <span class="token operator">=</span> <span class="token string">'man'</span><span class="token punctuation">;</span>
<span class="token class-name">Person</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>age <span class="token operator">=</span> <span class="token number">23</span><span class="token punctuation">;</span>
<span class="token class-name">Person</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">sayName</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token keyword">var</span> createPerson1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
createPerson1<span class="token punctuation">.</span><span class="token function">sayName</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">var</span> createPerson2 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
createPerson2<span class="token punctuation">.</span><span class="token function">sayName</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>createPerson1<span class="token punctuation">.</span>sayName <span class="token operator">==</span> createPerson2<span class="token punctuation">.</span>sayName<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><ol start="4"><li>组合构造函数加原型模式
<ul><li>优点：<strong>采用了构造函数模式和原型模式的优点，这种混成模式是目前使用最广泛，认同度最高的一种创建自	定类型的方法。</strong></li> <li>缺点：<strong>由于使用了两种模式，因此对于代码的封装性来说不是很好。</strong></li></ul></li></ol> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">//4.组合构造函数加原型模式</span>
<span class="token keyword">function</span> <span class="token function">Person</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> sex<span class="token punctuation">,</span> age</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>sex <span class="token operator">=</span> sex<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>age <span class="token operator">=</span> age<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token class-name">Person</span><span class="token punctuation">.</span>prototype <span class="token operator">=</span> <span class="token punctuation">{</span>
    constructor<span class="token operator">:</span>Person<span class="token punctuation">,</span>
    <span class="token function-variable function">sayName</span><span class="token operator">:</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">var</span> createPerson1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token string">&quot;组合1&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;man&quot;</span><span class="token punctuation">,</span> <span class="token number">23</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
createPerson1<span class="token punctuation">.</span><span class="token function">sayName</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">var</span> createPerson2 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token string">&quot;组合2&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;man&quot;</span><span class="token punctuation">,</span> <span class="token number">23</span><span class="token punctuation">)</span>
createPerson2<span class="token punctuation">.</span><span class="token function">sayName</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>createPerson1<span class="token punctuation">.</span>sayName <span class="token operator">===</span> createPerson2<span class="token punctuation">.</span>sayName<span class="token punctuation">)</span> <span class="token comment">//同一个原型</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><ol start="5"><li>动态原型模式
<ul><li>优点：<strong>解决了混成模式中封装性的问题</strong></li></ul></li></ol> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">//5.动态原型模式</span>
<span class="token keyword">function</span> <span class="token function">Person</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> sex<span class="token punctuation">,</span> age</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>sex <span class="token operator">=</span> sex<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>age <span class="token operator">=</span> age<span class="token punctuation">;</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> <span class="token keyword">this</span><span class="token punctuation">.</span>sayName <span class="token operator">!==</span> <span class="token string">&quot;function&quot;</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token class-name">Person</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">sayName</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">var</span> createPerson1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token string">&quot;动态原型&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;man&quot;</span><span class="token punctuation">,</span> <span class="token number">23</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
createPerson1<span class="token punctuation">.</span><span class="token function">sayName</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><ol start="6"><li>寄生构造函数模式
<ul><li>优点：<strong>我对这个模式的理解是，它主要是基于一个已有的类型，在实例化时对实例化的对象进行扩展。这样既不用修改原来的构造函数，也达到了扩展对象的目的。</strong></li> <li>缺点：<strong>和工厂模式一样的问题，不能依赖 instanceof 操作符来确定对象的类型。</strong></li></ul></li></ol> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">function</span> <span class="token function">Person</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> sex<span class="token punctuation">,</span> age</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">var</span> o <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Object</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    o<span class="token punctuation">.</span>name <span class="token operator">=</span> name<span class="token punctuation">;</span>
    o<span class="token punctuation">.</span>sex <span class="token operator">=</span> sex<span class="token punctuation">;</span>
    o<span class="token punctuation">.</span>age <span class="token operator">=</span> age<span class="token punctuation">;</span>
    o<span class="token punctuation">.</span><span class="token function-variable function">sayName</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> o<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">var</span> person1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token string">&quot;寄生构造函数&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;man&quot;</span><span class="token punctuation">,</span> <span class="token number">23</span><span class="token punctuation">)</span> <span class="token comment">//跟工厂模式不同 使用new 创建对象</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><ol start="7"><li>稳妥构造函数模式
<ul><li>优点：<strong>以上面为例，除了 sayName 方法外，没有别的方法可以访问数据成员，这就是稳妥构造函数提供的安全性。</strong></li> <li>缺点：<strong>和寄生构造函数一样，没有办法使用 instanceof 操作符来判断对象的类型</strong></li></ul></li></ol> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">function</span> <span class="token function">Person</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> sex<span class="token punctuation">,</span> age</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">var</span> o <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Object</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    o<span class="token punctuation">.</span><span class="token function-variable function">sayName</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> o
<span class="token punctuation">}</span>
<span class="token keyword">var</span> person1 <span class="token operator">=</span> <span class="token function">Person</span><span class="token punctuation">(</span><span class="token string">&quot;稳妥&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;man&quot;</span><span class="token punctuation">,</span> <span class="token number">23</span><span class="token punctuation">)</span>
person1<span class="token punctuation">.</span><span class="token function">sayName</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h3 id="_6-js继承的几种实现方式？"><a href="#_6-js继承的几种实现方式？" class="header-anchor">#</a> 6.js继承的几种实现方式？</h3> <ol><li><p>原型链继承</p> <ul><li>缺点：
<ol><li><strong>包含引用类型的原型属性会被所有实例属性共享，容易造成属性的修改混乱。</strong></li> <li><strong>在创建子类型的实例时，不能向超类型的构造函数中传递参数。</strong></li></ol></li></ul></li> <li><p>借用构造函数</p> <ul><li>优点：<strong>可以在子类型构造函数中向超类型构造函数添加参数</strong></li> <li>缺点：<strong>和构造函数模式一样的问题，所有的方法都在构造函数中定义，因此就无法做到函数的复用。而且超类型的原型中定义的方法，对于子类型而言也是不可见的。</strong></li></ul> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">//借用构造函数</span>
<span class="token keyword">function</span> <span class="token function">SuperType</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>colors <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;red&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;blue&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;green&quot;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token class-name">SuperType</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">sayHello</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;test&quot;</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">SubType</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">//继承了 superType</span>
    <span class="token function">SuperType</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token keyword">var</span> instance1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">SubType</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
instance1<span class="token punctuation">.</span>colors<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">&quot;black&quot;</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>instance1<span class="token punctuation">.</span>colors<span class="token punctuation">)</span> <span class="token comment">//&quot;red,blue,green,black&quot;</span>
instance1<span class="token punctuation">.</span><span class="token function">sayHello</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">//instance1.sayHello is not a function  不能继承原型中的方法</span>
<span class="token keyword">var</span> instance2 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">SubType</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>instance2<span class="token punctuation">.</span>colors<span class="token punctuation">)</span> <span class="token comment">//&quot;red,blue,green&quot;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div></li> <li><p>组合继承</p> <ul><li>优点：<strong>组合继承避免了原型链和借用构造函数的缺陷，融合了它们的优点，成为 JavaScript 中最常用的继承模式。而且，instanceof 和 isPropertyOf() 也能够用于识别基于组合继承创建的对象。</strong></li> <li>缺点：<strong>调用了两次超类的构造函数，导致基类的原型对象中增添了不必要的超类的实例对象中的所有属性</strong></li></ul> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">//组合继承</span>
<span class="token keyword">function</span> <span class="token function">SuperType</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>colors <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;red&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;blue&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;green&quot;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token class-name">SuperType</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">sayName</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">SubType</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span>age</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token function">SuperType</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span>name<span class="token punctuation">)</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>age <span class="token operator">=</span> age
<span class="token punctuation">}</span>
<span class="token class-name">SubType</span><span class="token punctuation">.</span>prototype <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">SuperType</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token class-name">SubType</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>constructor <span class="token operator">=</span> SubType<span class="token punctuation">;</span>
<span class="token class-name">SubType</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">sayAge</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>age<span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token keyword">var</span> instance1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">SubType</span><span class="token punctuation">(</span><span class="token string">&quot;james&quot;</span><span class="token punctuation">,</span> <span class="token number">9</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
instance1<span class="token punctuation">.</span>colors<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">'black'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>instance1<span class="token punctuation">.</span>colors<span class="token punctuation">)</span> <span class="token comment">//&quot;red,blue,green,black&quot;</span>
instance1<span class="token punctuation">.</span><span class="token function">sayName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//james</span>
instance1<span class="token punctuation">.</span><span class="token function">sayAge</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 9</span>

<span class="token keyword">var</span> instance2 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">SubType</span><span class="token punctuation">(</span><span class="token string">&quot;kobe&quot;</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>instance2<span class="token punctuation">.</span>colors<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//&quot;red,blue,green&quot;</span>
instance2<span class="token punctuation">.</span><span class="token function">sayName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//kobe</span>
instance2<span class="token punctuation">.</span><span class="token function">sayAge</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//10</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br></div></div></li> <li><p>原型式继承</p> <ul><li>优点：<strong>可以实现基于一个对象的简单继承，不必创建构造函数</strong></li> <li>缺点：<strong>与原型链中提到的缺点相同，一个是传参的问题，一个是属性共享的问题</strong></li></ul> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">function</span> <span class="token function">object</span><span class="token punctuation">(</span><span class="token parameter">o</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">function</span> <span class="token constant">F</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token class-name">F</span><span class="token punctuation">.</span>prototype <span class="token operator">=</span> o<span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">F</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div></li> <li><p>寄生式继承</p> <ul><li>优点： <strong>在主要考虑对象而不是自定义类型和构造函数的情况下，实现简单的继承。</strong></li> <li>缺点：<strong>使用该继承方式，在为对象添加函数的时候，没有办法做到函数的复用。</strong></li></ul> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">function</span> <span class="token function">createAnother</span><span class="token punctuation">(</span><span class="token parameter">original</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">var</span> clone <span class="token operator">=</span> <span class="token function">object</span><span class="token punctuation">(</span>original<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//通过调用函数创建一个新对象</span>
    clone<span class="token punctuation">.</span><span class="token function-variable function">sayHi</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>  <span class="token comment">// 某种方式增强这个对象</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;hi&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> clone<span class="token punctuation">;</span>  <span class="token comment">// 返回这个对象</span>
<span class="token punctuation">}</span>
<span class="token keyword">var</span> person <span class="token operator">=</span> <span class="token punctuation">{</span>
    name<span class="token operator">:</span> <span class="token string">&quot;james&quot;</span>
<span class="token punctuation">}</span>
<span class="token keyword">var</span> anotherPerson <span class="token operator">=</span> <span class="token function">createAnother</span><span class="token punctuation">(</span>person<span class="token punctuation">)</span><span class="token punctuation">;</span>
anotherPerson<span class="token punctuation">.</span><span class="token function">sayHi</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// &quot;hi&quot;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div></li> <li><p>寄生式组合继承</p> <ul><li>优点：<strong>效率高，避免了在 SubType.prototype 上创建不必要的属性。与此同时还能保持原型链不变，开发人员普遍认为寄生组合式继承是引用类型最理想的继承范式。</strong></li></ul> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">function</span> <span class="token function">Person</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token class-name">Person</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">sayName</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;My name is &quot;</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">+</span> <span class="token string">&quot;.&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">Student</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> grade</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">Person</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> name<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>grade <span class="token operator">=</span> grade<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token class-name">Student</span><span class="token punctuation">.</span>prototype <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token class-name">Person</span><span class="token punctuation">.</span>prototype<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token class-name">Student</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>constructor <span class="token operator">=</span> Student<span class="token punctuation">;</span>
<span class="token class-name">Student</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">sayMyGrade</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;My grade is &quot;</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>grade <span class="token operator">+</span> <span class="token string">&quot;.&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> stud1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Student</span><span class="token punctuation">(</span><span class="token string">&quot;ccc&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;555&quot;</span><span class="token punctuation">)</span>
stud1<span class="token punctuation">.</span><span class="token function">sayName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div></li></ol> <h3 id="_7-谈谈你对this、call、apply和bind的理解"><a href="#_7-谈谈你对this、call、apply和bind的理解" class="header-anchor">#</a> 7. 谈谈你对this、call、apply和bind的理解</h3> <ul><li>在浏览器里，在全局范围内this 指向window对象；</li> <li>在函数中，this永远指向最后调用他的那个对象；</li> <li>构造函数中，this指向new出来的那个新的对象；</li> <li>call、apply、bind中的this被强绑定在指定的那个对象上；</li> <li>箭头函数中this比较特殊,箭头函数this为父作用域的this，不是调用时的this.要知道前四种方式,都是调用时确定,也就是动态的,而箭头函数的this指向是静态的,声明的时候就确定了下来；</li> <li>apply、call、bind都是js给函数内置的一些API，调用他们可以为函数指定this的执行,同时也可以传参。</li></ul> <h3 id="_8-js-获取原型的方法？"><a href="#_8-js-获取原型的方法？" class="header-anchor">#</a> 8.js 获取原型的方法？</h3> <ol><li>p.<strong>proto</strong></li> <li>p.constructor.prototype</li> <li>Object.getPrototypeOf(p)</li></ol> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code> <span class="token keyword">function</span> <span class="token function">Person</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
 <span class="token punctuation">}</span>
 <span class="token keyword">var</span> p <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="_9-什么是闭包，为什么要用它？"><a href="#_9-什么是闭包，为什么要用它？" class="header-anchor">#</a> 9.什么是闭包，为什么要用它？</h3> <blockquote><p><strong>闭包是指有权访问另一个函数作用域内变量的函数</strong>，创建闭包的最常见的方式就是在一个函数内创建另一个函数，创建的函数可以 访问到当前函数的局部变量</p></blockquote> <ul><li>闭包有两个常用的用途。
<ol><li>闭包的第一个用途是使我们在函数外部能够访问到函数内部的变量。通过使用闭包，我们可以通过在外部调用闭包函数，从而在外部访问到函数内部的变量，可以使用这种方法来创建私有变量。</li> <li>函数的另一个用途是使已经运行结束的函数上下文中的变量对象继续留在内存中，因为闭包函数保留了这个变量对象的引用，所以这个变量对象不会被回收。</li></ol> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code>  <span class="token keyword">function</span> <span class="token function">a</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
      <span class="token keyword">var</span> n <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
      <span class="token keyword">function</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
      n<span class="token operator">++</span><span class="token punctuation">;</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">return</span> add<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">var</span> a1 <span class="token operator">=</span> <span class="token function">a</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//注意，函数名只是一个标识（指向函数的指针），而（）才是执行函数；</span>
  <span class="token function">a1</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>    <span class="token comment">//1</span>
  <span class="token function">a1</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>    <span class="token comment">//2  第二次调用n变量还在内存中</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div></li></ul> <h3 id="_10-bom和dom"><a href="#_10-bom和dom" class="header-anchor">#</a> 10.BOM和DOM</h3> <ul><li><strong>DOM</strong> 指的是文档对象模型，它指的是把文档当做一个对象来对待，这个对象主要定义了处理网页内容的方法和接口。</li> <li><strong>BOM</strong>  指的是浏览器对象模型，它指的是把浏览器当做一个对象来对待，这个对象主要定义了与浏览器进行交互的法和接口。BOM 的核心是 window，而 window 对象具有双重角色，它既是通过 js 访问浏览器窗口的一个接口，又是一个 Global（全局） 对象。这意味着在网页中定义的任何对象，变量和函数，都作为全局对象的一个属性或者方法存在。window 对象含有 locati on 对象、navigator 对象、screen 对象等子对象，并且 DOM 的最根本的对象 document 对象也是 BOM 的 window 对 象的子对象。</li></ul> <h3 id="_11-三种事件模型是什么？"><a href="#_11-三种事件模型是什么？" class="header-anchor">#</a> 11. 三种事件模型是什么？</h3> <ul><li><strong>事件</strong> 是用户操作网页时发生的交互动作或者网页本身的一些操作，现代浏览器一共有三种事件模型。
<ol><li><strong>DOM0级模型：</strong> ，这种模型不会传播，所以没有事件流的概念，但是现在有的浏览器支持以冒泡的方式实现，它可以在网页中直接定义监听函数，也可以通过 js属性来指定监听函数。这种方式是所有浏览器都兼容的。</li> <li><strong>IE 事件模型：</strong> 在该事件模型中，一次事件共有两个过程，事件处理阶段，和事件冒泡阶段。事件处理阶段会首先执行目标元素绑定的监听事件。然后是事件冒泡阶段，冒泡指的是事件从目标元素冒泡到 document，依次检查经过的节点是否绑定了事件监听函数，如果有则执行。这种模型通过 attachEvent 来添加监听函数，可以添加多个监听函数，会按顺序依次执行。</li> <li><strong>DOM2 级事件模型：</strong> 在该事件模型中，一次事件共有三个过程，第一个过程是事件捕获阶段。捕获指的是事件从 document 一直向下传播到目标元素，依次检查经过的节点是否绑定了事件监听函数，如果有则执行。后面两个阶段和 IE 事件模型的两个阶段相同。这种事件模型，事件绑定的函数是 addEventListener，其中第三个参数可以指定事件是否在捕获阶段执行。</li></ol></li></ul> <h3 id="_12-事件委托是什么？"><a href="#_12-事件委托是什么？" class="header-anchor">#</a> 12.事件委托是什么？</h3> <ul><li><strong>事件委托</strong> 本质上是利用了浏览器事件冒泡的机制。因为事件在冒泡过程中会上传到父节点，并且父节点可以通过事件对象获取到 目标节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件，这种方式称为事件代理。</li> <li>使用事件代理我们可以不必要为每一个子元素都绑定一个监听事件，这样减少了内存上的消耗。并且使用事件代理我们还可以实现事件的动态绑定，比如说新增了一个子节点，我们并不需要单独地为它添加一个监听事件，它所发生的事件会交给父元素中的监听函数来处理。</li></ul> <h3 id="_13-事件传播是什么？"><a href="#_13-事件传播是什么？" class="header-anchor">#</a> 13.事件传播是什么？</h3> <ul><li>当<strong>事件</strong>发生在DOM元素上时，该事件并不完全发生在那个元素上。在“当事件发生在DOM元素上时，该事件并不完全发生在那个元素上。</li> <li>事件传播有三个阶段：</li></ul> <div class="language- extra-class"><pre><code>1. 捕获阶段–事件从 window 开始，然后向下到每个元素，直到到达目标元素事件或event.target。
2. 目标阶段–事件已达到目标元素。
3. 冒泡阶段–事件从目标元素冒泡，然后上升到每个元素，直到到达 window。
</code></pre></div><h3 id="_14-事件捕获是什么？"><a href="#_14-事件捕获是什么？" class="header-anchor">#</a> 14.事件捕获是什么？</h3> <ul><li>当事件发生在 DOM 元素上时，该事件并不完全发生在那个元素上。在捕获阶段，事件从window开始，一直到触发事件的元素。<code>window----&gt; document----&gt; html----&gt; body ----&gt;目标元素</code></li> <li><code>addEventListener</code>方法具有第三个可选参数<code>useCapture</code>，其默认值为<code>false</code>，事件将在冒泡阶段中发生，如果为true，则事件将在捕获阶段中发生。如果单击<code>child</code>元素，它将分别在控制台上打印<code>window</code>，<code>document</code>，<code>html</code>，<code>grandparent</code>和<code>parent</code>，这就是<strong>事件捕获</strong>。</li></ul> <h3 id="_15-什么是事件冒泡？"><a href="#_15-什么是事件冒泡？" class="header-anchor">#</a> 15.什么是事件冒泡？</h3> <ul><li>事件冒泡刚好与事件捕获相反，<code>当前元素----&gt;body ----&gt; html----&gt;document ----&gt;window</code>。当事件发生在DOM元素上时，该事件并不完全发生在那个元素上。在冒泡阶段，事件冒泡，或者事件发生在它的父代，祖父母，祖父母的父代，直到到达window为止。</li> <li><code>addEventListener</code>方法具有第三个可选参数<code>useCapture</code>，其默认值为<code>false</code>，事件将在冒泡阶段中发生，如果为true，则事件将在捕获阶段中发生。如果单击<code>child</code>元素，它将分别在控制台上打印<code>child</code>，<code>parent</code>，<code>grandparent</code>，<code>html</code>，<code>document</code>和<code>window</code>，这就是<strong>事件冒泡</strong>。</li></ul> <h3 id="_16-dom操作"><a href="#_16-dom操作" class="header-anchor">#</a> 16.DOM操作</h3> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code> <span class="token comment">//1.创建新节点</span>
 <span class="token function">createDocumentFragment</span><span class="token punctuation">(</span><span class="token punctuation">)</span>    <span class="token comment">//创建一个DOM片段</span>
 <span class="token function">createElement</span><span class="token punctuation">(</span><span class="token punctuation">)</span>   <span class="token comment">//创建一个具体的元素</span>
 <span class="token function">createTextNode</span><span class="token punctuation">(</span><span class="token punctuation">)</span>   <span class="token comment">//创建一个文本节点</span>

 <span class="token comment">//2.添加、移除、替换、插入</span>
 <span class="token function">appendChild</span><span class="token punctuation">(</span>node<span class="token punctuation">)</span>
 <span class="token function">removeChild</span><span class="token punctuation">(</span>node<span class="token punctuation">)</span>
 <span class="token function">replaceChild</span><span class="token punctuation">(</span><span class="token keyword">new</span><span class="token punctuation">,</span>old<span class="token punctuation">)</span>
 <span class="token function">insertBefore</span><span class="token punctuation">(</span><span class="token keyword">new</span><span class="token punctuation">,</span>old<span class="token punctuation">)</span>

 <span class="token comment">//3.查找</span>
 <span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 <span class="token function">getElementsByName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 <span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 <span class="token function">getElementsByClassName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 <span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 <span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

 <span class="token comment">//4.属性操作</span>
 <span class="token function">getAttribute</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//获取属性</span>
 <span class="token function">setAttribute</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> value<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//设置属性的值</span>
 <span class="token function">hasAttribute</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//属性是否存在</span>
 <span class="token function">removeAttribute</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//删除</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br></div></div><h3 id="_17-js数组操作"><a href="#_17-js数组操作" class="header-anchor">#</a> 17.js数组操作</h3> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code> <span class="token keyword">var</span> arrList <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">]</span>
 <span class="token comment">//1.push()  向数组的末尾添加一个或多个元素，并返回新的长度</span>
 arrList<span class="token punctuation">.</span><span class="token function">psuh</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token comment">//&quot;1,2,3,4,1&quot;</span>

 <span class="token comment">//2.shift() 删除数组的第一个元素，并返回第一个元素的值</span>
 arrList<span class="token punctuation">.</span><span class="token function">shift</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">//返回删除的那个值 1 arrList = &quot;2,3,4&quot;</span>

 <span class="token comment">//3.unshift() 在数组的开头添加元素 并返回新的长度</span>
 arrList<span class="token punctuation">.</span><span class="token function">unshift</span><span class="token punctuation">(</span><span class="token number">9</span><span class="token punctuation">)</span>  <span class="token comment">//&quot;9,1,2,3,4&quot;  返回值：5</span>

 <span class="token comment">//4.pop() 删除数组的最后一个值 返回删除的值</span>
 arrList<span class="token punctuation">.</span><span class="token function">pop</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">//&quot;1,2,3&quot;  返回值：4</span>

 <span class="token comment">//5.splice() 用于插入，删除或替换数组的元素</span>
 arrList<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">)</span> <span class="token comment">//第一个参数index 第二个参数删除几个</span>

 <span class="token comment">//6.concat() 合并两个数组</span>
 arrList<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">//返回一个新数组 &quot;1,2,3,4,1,2,3&quot;</span>

 <span class="token comment">//7.join() 根据传入的参数分割并转成字符串</span>
 arrList<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">'|'</span><span class="token punctuation">)</span> <span class="token comment">//返回一个新数组 &quot;1|2|3|4&quot;</span>

 <span class="token comment">//8.toString() 数组转字符串</span>
 arrrList<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">//返回一个新数组 &quot;1,2,3,4&quot;</span>

 <span class="token comment">//9.reverse() 颠倒数组 会影响原数组</span>
 arrList<span class="token punctuation">.</span><span class="token function">reverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// &quot;4,3,2,1&quot; 原数组改变</span>

 <span class="token comment">//10.slice() 从数组中返回选定的元素 （start,end）</span>
 arrList<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">)</span> <span class="token comment">//&quot;3,4&quot; 返回新数组</span>

 <span class="token comment">//11.sort() 倒序排序数组</span>
 arrList<span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">//&quot;4,3,2,1&quot; 原数组改变</span>

 <span class="token comment">//12.indexOf() 获取选择在数组中的索引</span>
 arrList<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token comment">//2 返回值在index 找不到返回-1</span>

 <span class="token comment">//13.lastIndexOf()</span>
 arrList<span class="token punctuation">.</span><span class="token function">lastIndexOf</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token comment">//1返回值在index 找不到返回-1</span>

 <span class="token comment">//14.forEach() 循环数组 传入一个匿名函数</span>
 arrList<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
     console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span>
 <span class="token punctuation">}</span><span class="token punctuation">)</span>
 <span class="token comment">//15.map() 对数组中的值进行操作 传入一个匿名函数 返回一个新数组 不影响原数组</span>
 <span class="token keyword">var</span> newArr <span class="token operator">=</span> arrList<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
 <span class="token keyword">return</span> e<span class="token operator">*</span><span class="token number">2</span>  
 <span class="token punctuation">}</span><span class="token punctuation">)</span>
 console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>newArr<span class="token punctuation">)</span> <span class="token comment">//&quot;2,4,6,8&quot;</span>

 <span class="token comment">//16.every() //对数组中每一个值进行判断 都符合 才为true 不影响原数组</span>
 arrList<span class="token punctuation">.</span><span class="token function">every</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
     <span class="token keyword">return</span> e <span class="token operator">&lt;</span> <span class="token number">3</span>
 <span class="token punctuation">}</span><span class="token punctuation">)</span>  <span class="token comment">// false  3 !&lt; 4</span>

 <span class="token comment">//17.some() //对数组中每一个值进行判断 有一个符合 就为true 不影响原数组</span>
 arrList<span class="token punctuation">.</span><span class="token function">some</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
     <span class="token keyword">return</span> e <span class="token operator">&lt;</span> <span class="token number">3</span>
 <span class="token punctuation">}</span><span class="token punctuation">)</span>  <span class="token comment">//true 有一项符合 就是true</span>

 <span class="token comment">//18.filter() 根据条件 过滤 返回符合条件的数组 不影响原数组</span>
 <span class="token keyword">var</span> filterArr <span class="token operator">=</span> arrList<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
     <span class="token keyword">return</span> e <span class="token operator">&lt;</span> <span class="token number">3</span>
 <span class="token punctuation">}</span><span class="token punctuation">)</span>
 console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>filterArr<span class="token punctuation">)</span> <span class="token comment">//&quot;1,2&quot; </span>

 <span class="token comment">//19.reduce() 求数组中的总和 (总和：计算后的值，当前的值，当前的索引，当前的对象)</span>
 <span class="token keyword">var</span> totals <span class="token operator">=</span> arrList<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">total<span class="token punctuation">,</span>currentValue<span class="token punctuation">,</span>currentIndex<span class="token punctuation">,</span>arr</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
     <span class="token keyword">return</span> total <span class="token operator">+</span> currentValue<span class="token punctuation">;</span>
 <span class="token punctuation">}</span><span class="token punctuation">)</span>
 totals <span class="token comment">// 10 </span>

 <span class="token comment">//20.reduceRight() 和reduce一样 只不过是从末尾开始计算的</span>
 <span class="token keyword">var</span> totals <span class="token operator">=</span> arrList<span class="token punctuation">.</span><span class="token function">reduceRight</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">total<span class="token punctuation">,</span>currentValue<span class="token punctuation">,</span>currentIndex<span class="token punctuation">,</span>arr</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
     <span class="token keyword">return</span> total <span class="token operator">+</span> currentValue<span class="token punctuation">;</span>
 <span class="token punctuation">}</span><span class="token punctuation">)</span>
 totals <span class="token comment">// 10 </span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br></div></div><h3 id="_18-js对象操作"><a href="#_18-js对象操作" class="header-anchor">#</a> 18.js对象操作</h3> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code> <span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token string">'abcdefg'</span><span class="token punctuation">;</span>
 <span class="token comment">//1.charAt() 返回在指定位置的字符</span>
 obj<span class="token punctuation">.</span><span class="token function">chatAt</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span> <span class="token comment">//c  </span>

 <span class="token comment">//2.charCodeAt() 返回指定位置的Unicode编码</span>
 obj<span class="token punctuation">.</span><span class="token function">charCodeAt</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span> <span class="token comment">//100</span>

 <span class="token comment">//3.concat()  连接字符串</span>
 obj<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token string">'hijk'</span><span class="token punctuation">)</span> <span class="token comment">// 'abcdefghijk' 返回新字符串</span>

 <span class="token comment">//4.indexOf() 检索字符串</span>
 obj<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">'b'</span><span class="token punctuation">)</span> <span class="token comment">//1  返回搜索的index</span>

 <span class="token comment">//5.match() 找到一个或多个正则表达式的匹配</span>
 obj<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

 <span class="token comment">//6.replace() 替换与正则匹配的字符串</span>
 obj<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token string">'要替换的值'</span><span class="token punctuation">,</span><span class="token string">'替换的值'</span><span class="token punctuation">)</span> 

 <span class="token comment">//7.search() 搜索与正则匹配的字符串 没找到返回-1</span>
 obj<span class="token punctuation">.</span><span class="token function">search</span><span class="token punctuation">(</span><span class="token string">'b'</span><span class="token punctuation">)</span> <span class="token comment">//1</span>

 <span class="token comment">//8.slice('起始位置','结束位置') 提取字符串的片段</span>
 obj<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">)</span> <span class="token comment">// c</span>

 <span class="token comment">//9.split() 把字符串分割数组</span>
 <span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token string">&quot;a,b,c,d,e&quot;</span>
 obj<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">//['a,b,c,d,e']</span>
 obj<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">','</span><span class="token punctuation">)</span> <span class="token comment">//['a','b','c','d','e']</span>

 <span class="token comment">//10.toLocaleLowerCase() 字符串转为小写</span>
 obj<span class="token punctuation">.</span><span class="token function">toLocaleLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">//&quot;abcdefg&quot;</span>

 <span class="token comment">//11.toLocaleUpperCase() 字符串转大写</span>
 obj<span class="token punctuation">.</span><span class="token function">toLocaleUpperCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">//&quot;ABCDEFG&quot;</span>

 <span class="token comment">//12.toLowerCase() 字符串转为小写</span>
 obj<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">//&quot;abcdefg&quot;</span>

 <span class="token comment">//13.toUpperCase() 字符串转大写</span>
 obj<span class="token punctuation">.</span><span class="token function">toUpperCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">//&quot;ABCDEFG&quot;</span>

 <span class="token comment">//14.substr('起始位置','长度') 提取索引的字符串</span>
 obj<span class="token punctuation">.</span><span class="token function">substr</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">)</span> <span class="token comment">// bc </span>

 <span class="token comment">//15.substring('起始位置', '结束位置') 提取字符串两个index之间的字符</span>
 obj<span class="token punctuation">.</span><span class="token function">substring</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">)</span>  <span class="token comment">//b</span>

 <span class="token comment">//16.trim() 去除字符串前后空格</span>
 obj<span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br></div></div><h3 id="_19-ajax"><a href="#_19-ajax" class="header-anchor">#</a> 19.Ajax</h3> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code> <span class="token keyword">var</span> xhr <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
 xhr<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">'GET'</span><span class="token punctuation">,</span>url<span class="token punctuation">,</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 xhr<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 xhr<span class="token punctuation">.</span><span class="token function-variable function">onreadystatechange</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
     <span class="token keyword">if</span><span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>readyState <span class="token operator">==</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
         <span class="token keyword">if</span><span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>status <span class="token operator">==</span> <span class="token number">200</span> <span class="token operator">||</span> xht<span class="token punctuation">.</span>status <span class="token operator">==</span> <span class="token number">304</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
         console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>xhr<span class="token punctuation">)</span>
         <span class="token punctuation">}</span>
     <span class="token punctuation">}</span>
 <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h3 id="_20-es6新特性"><a href="#_20-es6新特性" class="header-anchor">#</a> 20.es6新特性</h3> <ul><li>块作用域</li> <li>类</li> <li>箭头函数</li> <li>模板字符串</li> <li>加强的对象正面</li> <li>对象解构</li> <li>Promise</li> <li>模块</li> <li>Symbol</li> <li>代理（proxy）set</li> <li>函数默认参数</li> <li>rest和展开</li></ul> <h3 id="_21-var-let-const的区别"><a href="#_21-var-let-const的区别" class="header-anchor">#</a> 21.var ,let,const的区别</h3> <ol><li>var声明的变量会挂载在window上，而let和const声明的变量不会：</li> <li>var声明变量存在变量提升，let和const不存在变量提升:</li> <li>let和const声明形成块作用域</li> <li>同一作用域下let和const不能声明同名变量，而var可以</li> <li>暂存死区</li> <li>const：
<ul><li>声明必须复制，不能用nul占位。</li> <li>声明后不能修改。</li> <li>声明的是复合类型数据，可以修改</li></ul></li></ol> <h3 id="_22-回调函数"><a href="#_22-回调函数" class="header-anchor">#</a> 22.回调函数</h3> <ul><li><strong>回调函数</strong>是一段可执行的代码段，它作为一个参数传递给其他的代码，其作用是在需要的时候方便调用这段（回调函数）代码。</li></ul> <h3 id="_23-promise是什么？可以手写promise"><a href="#_23-promise是什么？可以手写promise" class="header-anchor">#</a> 23.Promise是什么？可以手写Promise</h3> <blockquote><p>Promise是异步编程的的一种解决方案。</p> <p>一个Promise有几种状态</p> <ol><li>pedding：初始状态，既不是成功，也不是失败状态。</li> <li>fullfilled：意味着操作成功完成。</li> <li>rejected：意味着操作失败。</li></ol> <p>一旦状态改变，就不能再次改变状态</p></blockquote> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code> <span class="token keyword">function</span> <span class="token function">myPromise</span> <span class="token punctuation">(</span><span class="token parameter">constructor</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
     <span class="token keyword">var</span> self <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
     self<span class="token punctuation">.</span>status <span class="token operator">=</span> <span class="token string">&quot;pedding&quot;</span><span class="token punctuation">;</span>
     self<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token keyword">undefined</span><span class="token punctuation">;</span>
     self<span class="token punctuation">.</span>reason <span class="token operator">=</span> <span class="token keyword">undefined</span><span class="token punctuation">;</span>
     <span class="token keyword">function</span> <span class="token function">resolve</span> <span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
         <span class="token keyword">if</span> <span class="token punctuation">(</span>self<span class="token punctuation">.</span>status <span class="token operator">==</span> <span class="token string">&quot;pedding&quot;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
             self<span class="token punctuation">.</span>value <span class="token operator">=</span> value<span class="token punctuation">;</span>
             self<span class="token punctuation">.</span>status <span class="token operator">=</span> <span class="token string">&quot;resolve&quot;</span>
         <span class="token punctuation">}</span>
     <span class="token punctuation">}</span>
     <span class="token keyword">function</span> <span class="token function">reject</span> <span class="token punctuation">(</span><span class="token parameter">reason</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
         <span class="token keyword">if</span> <span class="token punctuation">(</span>self<span class="token punctuation">.</span>status <span class="token operator">==</span> <span class="token string">&quot;pedding&quot;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
             self<span class="token punctuation">.</span>reason <span class="token operator">=</span> reason<span class="token punctuation">;</span>
             self<span class="token punctuation">.</span>status <span class="token operator">=</span> <span class="token string">&quot;reject&quot;</span>
         <span class="token punctuation">}</span>
     <span class="token punctuation">}</span>
     <span class="token keyword">try</span> <span class="token punctuation">{</span>
         <span class="token function">constructor</span><span class="token punctuation">(</span>resolve<span class="token punctuation">,</span> reject<span class="token punctuation">)</span>
     <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
         <span class="token function">reject</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span>
     <span class="token punctuation">}</span>
 <span class="token punctuation">}</span>
 myPromise<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">then</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">success<span class="token punctuation">,</span> fail</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
     console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>status<span class="token punctuation">)</span>
     <span class="token keyword">switch</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>status<span class="token punctuation">)</span> <span class="token punctuation">{</span>
     <span class="token keyword">case</span> <span class="token string">&quot;resolve&quot;</span><span class="token operator">:</span>
         console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span>
         <span class="token function">success</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
         <span class="token keyword">break</span><span class="token punctuation">;</span>
     <span class="token keyword">case</span> <span class="token string">&quot;reject&quot;</span><span class="token operator">:</span>
         console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span>
         <span class="token function">fail</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>reason<span class="token punctuation">)</span><span class="token punctuation">;</span>
         <span class="token keyword">break</span><span class="token punctuation">;</span>
     <span class="token keyword">default</span><span class="token operator">:</span>
         <span class="token function">fail</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>reason<span class="token punctuation">)</span><span class="token punctuation">;</span>
         <span class="token keyword">break</span><span class="token punctuation">;</span>
     <span class="token punctuation">}</span>
 <span class="token punctuation">}</span>
 <span class="token keyword">var</span> mypromise <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">myPromise</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
     <span class="token keyword">var</span> random <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
     <span class="token keyword">if</span> <span class="token punctuation">(</span>random <span class="token operator">&gt;</span> <span class="token number">5</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
         <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">&quot;成功&quot;</span><span class="token punctuation">)</span>
     <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
         <span class="token function">reject</span><span class="token punctuation">(</span><span class="token string">&quot;失败&quot;</span><span class="token punctuation">)</span>
     <span class="token punctuation">}</span>
 <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 mypromise<span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
     console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span>
 <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
     console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span>
 <span class="token punctuation">}</span>
 <span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br></div></div><h3 id="_24-js的节流和防抖"><a href="#_24-js的节流和防抖" class="header-anchor">#</a> 24.js的节流和防抖</h3> <ol><li><strong>函数防抖</strong>：是指在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。这可以使用在一些点击请求的事件上，避免因为用户的多次点击向后端发送多次请求。</li> <li><strong>函数节流</strong>： 是指规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。节流可以使用在 scroll 函数的事件监听上，通过事件节流来降低事件调用的频率。</li></ol> <h3 id="_25-什么是设计模式？"><a href="#_25-什么是设计模式？" class="header-anchor">#</a> 25.什么是设计模式？</h3> <blockquote><p>设计模式是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了重用代码、让代码更容易被他人理解、保证代码可靠性。 毫无疑问，设计模式于己于他人于系统都是多赢的，设计模式使代码编制真正工程化，设计模式是软件工程的基石，如同大厦的一块块砖石一样。</p></blockquote> <ol><li><strong>S – Single Responsibility Principle 单一职责原则</strong> <ul><li>一个程序只做好一件事</li> <li>如果功能过于复杂就拆分开，每个部分保持独立</li></ul></li> <li><strong>O – OpenClosed Principle 开放/封闭原则</strong> <ul><li>对扩展开放，对修改封闭</li> <li>增加需求时，扩展新代码，而非修改已有代码</li></ul></li> <li><strong>L – Liskov Substitution Principle 里氏替换原则</strong> <ul><li>子类能覆盖父类</li> <li>父类能出现的地方子类就能出现</li></ul></li> <li><strong>I – Interface Segregation Principle 接口隔离原则</strong> <ul><li>保持接口的单一独立</li> <li>类似单一职责原则，这里更关注接口</li></ul></li> <li><strong>D – Dependency Inversion Principle 依赖倒转原则</strong> <ul><li>面向接口编程，依赖于抽象而不依赖于具</li> <li>使用方只关注接口而不关注具体类的实现</li></ul></li></ol> <h3 id="_26-设计模式的类型"><a href="#_26-设计模式的类型" class="header-anchor">#</a> 26.设计模式的类型</h3> <ol><li><strong>结构型模式（Structural Patterns）：</strong> 通过识别系统中组件间的简单关系来简化系统的设计。</li> <li><strong>创建型模式（Creational Patterns）：</strong> 处理对象的创建，根据实际情况使用合适的方式创建对象。常规的对象创建方式可能会导致设计上的问题，或增加设计的复杂度。创建型模式通过以某种方式控制对象的创建来解决问题。</li> <li><strong>行为型模式（Behavioral Patterns）：</strong> 用于识别对象之间常见的交互模式并加以实现，如此，增加了这些交互的灵活性。</li></ol> <h3 id="_27-浅拷贝和深拷贝"><a href="#_27-浅拷贝和深拷贝" class="header-anchor">#</a> 27.浅拷贝和深拷贝</h3> <ol><li><strong>浅拷贝</strong>：「新的对象复制已有对象中非对象属性的值和对象属性的引用」。也可以理解为：「一个新的对象直接拷贝已存在的对象的对象属性的引用」，即浅拷贝。
<ol><li>Object.assign()</li> <li>扩展运算符</li> <li>手写浅拷贝<div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code>    <span class="token keyword">function</span> <span class="token function">clone</span> <span class="token punctuation">(</span><span class="token parameter">source</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">var</span> target <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
        <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> key <span class="token keyword">in</span> source<span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token class-name">Object</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">hasOwnProperty</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>source<span class="token punctuation">,</span> key<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                target<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> source<span class="token punctuation">[</span>key<span class="token punctuation">]</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">return</span> target
    <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div></li></ol></li> <li><strong>深拷贝</strong>：复制变量值，对于引用数据，则递归至基本类型后，再复制。深拷贝后的对象「与原来的对象完全隔离」，互不影响，对一个对象的修改并不会影响另一个对象。
<ol><li>JSON.parse(JSON.stringify())</li> <li>手写深拷贝<div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code>    <span class="token keyword">var</span> <span class="token function-variable function">isObject</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">obj</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token keyword">typeof</span> obj <span class="token operator">===</span> <span class="token string">'Object'</span> <span class="token operator">&amp;&amp;</span> obj <span class="token operator">!=</span> <span class="token keyword">null</span>  
    <span class="token punctuation">}</span>
    <span class="token keyword">function</span> <span class="token function">clone</span> <span class="token punctuation">(</span><span class="token parameter">source</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">!</span><span class="token function">isObject</span><span class="token punctuation">(</span>source<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token keyword">return</span> source
        <span class="token punctuation">}</span>
        <span class="token keyword">var</span> target <span class="token operator">=</span> Array<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>source<span class="token punctuation">)</span><span class="token operator">?</span> <span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
        <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> key <span class="token keyword">in</span> source<span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token class-name">Object</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">hasOwnProperty</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>source<span class="token punctuation">,</span> key<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token function">isObject</span><span class="token punctuation">(</span>source<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                    target<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">clone</span><span class="token punctuation">(</span>source<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
                    target<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> source<span class="token punctuation">[</span>key<span class="token punctuation">]</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">return</span> target<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div></li></ol></li></ol> <h3 id="_28-数组排序"><a href="#_28-数组排序" class="header-anchor">#</a> 28.数组排序</h3> <ol><li>sort</li> <li>冒泡排序</li></ol> <h3 id="_29-数组去重"><a href="#_29-数组去重" class="header-anchor">#</a> 29.数组去重</h3> <ol><li>简单去重<div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code>  <span class="token keyword">function</span> <span class="token function">filter</span> <span class="token punctuation">(</span><span class="token parameter">arr</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">var</span> temp <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
      <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span>i<span class="token operator">&lt;</span>arr<span class="token punctuation">.</span>length<span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
          <span class="token keyword">if</span><span class="token punctuation">(</span>temp<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token operator">==</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
              temp<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span>
          <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">return</span> temp<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div></li> <li></li> <li></li></ol> <h3 id="_30-冒泡排序"><a href="#_30-冒泡排序" class="header-anchor">#</a> 30.冒泡排序</h3> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code> <span class="token keyword">var</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">55</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
 <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> arr<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
     <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> j <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>j <span class="token operator">&lt;</span> arr<span class="token punctuation">.</span>length <span class="token operator">-</span> i <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">;</span>j<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
         <span class="token keyword">if</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span>j<span class="token punctuation">]</span> <span class="token operator">&gt;</span> arr<span class="token punctuation">[</span>j<span class="token operator">+</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
             <span class="token keyword">var</span> temp <span class="token operator">=</span> arr<span class="token punctuation">[</span>j<span class="token punctuation">]</span><span class="token punctuation">;</span>
             arr<span class="token punctuation">[</span>j<span class="token punctuation">]</span> <span class="token operator">=</span> arr<span class="token punctuation">[</span>j<span class="token operator">+</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
             arr<span class="token punctuation">[</span>j<span class="token operator">+</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">=</span> temp<span class="token punctuation">;</span>
         <span class="token punctuation">}</span>
     <span class="token punctuation">}</span>
 <span class="token punctuation">}</span>
 console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h2 id="vue"><a href="#vue" class="header-anchor">#</a> Vue</h2> <h3 id="_1-vue的优点"><a href="#_1-vue的优点" class="header-anchor">#</a> 1.vue的优点</h3> <ul><li>轻量级框架</li> <li>简单易学</li> <li>双向数据绑定</li> <li>组件化</li> <li>视图，数据，结构分离</li> <li>虚拟dom</li> <li>运行速度快</li></ul> <h3 id="_2-请详细说下你对vue生命周期的理解"><a href="#_2-请详细说下你对vue生命周期的理解" class="header-anchor">#</a> 2.请详细说下你对vue生命周期的理解</h3> <blockquote><p>总共8个阶段，创建前/后，载入前/后，更新前/后，销毁前/后。</p></blockquote> <ul><li>创建前/后： 在<strong>beforeCreate</strong>阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在<strong>created</strong>阶段，vue实例的数据对象data有了，el为undefined，还未初始化。</li> <li>载入前/后：在<strong>beforeMount</strong>阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在<strong>mounted</strong>阶段，vue实例挂载完成，data.message成功渲染。</li> <li>更新前/后：当data变化时，会触发<strong>beforeUpdate</strong>和<strong>updated</strong>方法</li> <li>销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在</li></ul> <h3 id="_3-为什么vue组件中data必须是一个函数"><a href="#_3-为什么vue组件中data必须是一个函数" class="header-anchor">#</a> 3.为什么vue组件中data必须是一个函数</h3> <ul><li>对象为引用类型，当复用组件时，由于数据对象都指向同一个data对象，当在一个组件中修改data时，其他重用的组件中的data会同时被修改；而使用返回对象的函数，由于每次返回的都是一个新对象（Object的实例），引用地址不同，则不会出现这个问题。</li></ul> <h3 id="_4-vue数据双向绑定原理；"><a href="#_4-vue数据双向绑定原理；" class="header-anchor">#</a> 4.vue数据双向绑定原理；</h3> <p>vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。主要分为以下几个步骤：</p> <blockquote><p>1、需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化</p></blockquote> <blockquote><p>2、compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图</p></blockquote> <blockquote><p>3、Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是: ①在自身实例化时往属性订阅器(dep)里面添加自己 ②自身必须有一个update()方法 ③待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。</p></blockquote> <blockquote><p>4、MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -&gt; 视图更新；视图交互变化(input) -&gt; 数据model变更的双向绑定效果。</p></blockquote> <h3 id="_5-vue-computed原理、computed和watch的区别；"><a href="#_5-vue-computed原理、computed和watch的区别；" class="header-anchor">#</a> 5.vue computed原理、computed和watch的区别；</h3> <ul><li>计算属性computed：
<ul><li>支持缓存，只有依赖数据发生改变，才会重新进行计算</li> <li>不支持异步，当computed内有异步操作时无效，无法监听数据的变化</li> <li>computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值</li> <li>如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed</li> <li>如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。</li></ul></li> <li>侦听属性watch：
<ul><li>不支持缓存，数据变，直接会触发相应的操作；</li> <li>watch支持异步；</li> <li>监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；</li> <li>当一个属性发生变化时，需要执行对应的操作；一对多；</li> <li>监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数：</li></ul></li></ul> <h3 id="_6-mvvm模式、mvc模式理解；"><a href="#_6-mvvm模式、mvc模式理解；" class="header-anchor">#</a> 6.mvvm模式、mvc模式理解；</h3> <ul><li>『View』：视图层（UI 用户界面）</li> <li>『ViewModel』：业务逻辑层（一切 js 可视为业务逻辑）</li> <li>『Model』：数据层（存储数据及对数据的处理如增删改查）</li></ul> <ul><li>MVVM 将数据双向绑定（data-binding）作为核心思想，View 和 Model 之间没有联系，它们通过 ViewModel 这个桥梁进行交互。</li> <li>Model 和 ViewModel 之间的交互是双向的，因此 View 的变化会自动同步到 Model，而 Model 的变化也会立即反映到 View 上显示。</li> <li>当用户操作 View，ViewModel 感知到变化，然后通知 Model 发生相应改变；反之当 Model 发生改变，ViewModel 也能感知到变化，使 View 作出相应更新。</li></ul> <ul><li>简述 MVVM
<ul><li>MVVM 是 Model-View-ViewModel 的缩写。MVVM 是一种设计思想。Model 层代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑；View 代表 UI 组件，它负责将数据模型转化成 UI 展现出来，ViewModel 是一个同步 View 和 Model 的对象。</li> <li>在 MVVM 架构下，View 和 Model 之间并没有直接的联系，而是通过 ViewModel 进行交互，Model 和 ViewModel 之间的交互是双向的， 因此 View 数据的变化会同步到 Model 中，而 Model 数据的变化也会立即反应到 View 上。</li> <li>ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。</li></ul></li></ul> <h3 id="_5-v-on可以监听多个方法吗？"><a href="#_5-v-on可以监听多个方法吗？" class="header-anchor">#</a> 5.v-on可以监听多个方法吗？</h3> <ul><li>可以</li></ul> <h3 id="_6-vue如何获取dom"><a href="#_6-vue如何获取dom" class="header-anchor">#</a> 6.vue如何获取dom</h3> <ul><li>ref 通过this.$refs.test</li></ul> <h3 id="_7-assets和static的区别"><a href="#_7-assets和static的区别" class="header-anchor">#</a> 7.assets和static的区别</h3> <ul><li>这两个都是用来存放项目中所使用的静态资源文件。</li> <li>两者的区别：</li> <li>assets中的文件在运行npm run build的时候会打包，简单来说就是会被压缩体积，代码格式化之类的。打包之后也会放到static中。</li> <li>static中的文件则不会被打包。</li></ul> <blockquote><p>建议：将图片等未处理的文件放在assets中，打包减少体积。而对于第三方引入的一些资源文件如iconfont.css等可以放在static中，因为这些文件已经经过处理了。</p></blockquote> <h3 id="_8-vue初始化页面的闪动"><a href="#_8-vue初始化页面的闪动" class="header-anchor">#</a> 8.vue初始化页面的闪动</h3> <div class="language-css line-numbers-mode"><pre class="language-css"><code> <span class="token selector">[v-cloak]</span><span class="token punctuation">{</span>
     <span class="token property">display</span><span class="token punctuation">:</span>none
 <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><blockquote><p>如果没有彻底解决问题，则在根元素加上style=&quot;display: none;&quot; :style=&quot;{display: 'block'}&quot;</p></blockquote> <h3 id="_9-vuex中有几个核心属性，分别是什么？"><a href="#_9-vuex中有几个核心属性，分别是什么？" class="header-anchor">#</a> 9.vuex中有几个核心属性，分别是什么？</h3> <p>一共有5个核心属性，分别是:</p> <ol><li>state 唯一数据源,Vue 实例中的 data 遵循相同的规则</li> <li>getters 可以认为是 store 的计算属性,就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。Getter 会暴露为 store.getters 对象，你可以以属性的形式访问这些值.</li> <li>mutation 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation,非常类似于事件,通过store.commit 方法触发</li> <li>action Action 类似于 mutation，不同在于Action 提交的是 mutation，而不是直接变更状态，Action 可以包含任意异步操作</li> <li>module 由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）</li></ol> <h3 id="_10-vuex中的数据在页面刷新后数据消失"><a href="#_10-vuex中的数据在页面刷新后数据消失" class="header-anchor">#</a> 10.vuex中的数据在页面刷新后数据消失</h3> <ul><li>用sessionstorage 或者 localstorage 存储数据</li></ul> <h3 id="_11-vue-router"><a href="#_11-vue-router" class="header-anchor">#</a> 11.vue-router</h3> <ul><li>Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：
<ul><li>嵌套的路由/视图表</li> <li>模块化的、基于组件的路由配置</li> <li>路由参数、查询、通配符</li> <li>基于 Vue.js 过渡系统的视图过渡效果</li> <li>细粒度的导航控制</li> <li>带有自动激活的 CSS class 的链接</li> <li>HTML5 历史模式或 hash 模式，在 IE9 中自动降级</li> <li>自定义的滚动条行为</li></ul></li></ul> <h3 id="_12-vue-router导航钩子"><a href="#_12-vue-router导航钩子" class="header-anchor">#</a> 12.vue-router导航钩子</h3> <ul><li>常用的是router.beforeEach(to,from,next)，在跳转前进行权限判断。一共有三种：</li></ul> <div class="language- extra-class"><pre><code>- 全局导航钩子：router.beforeEach(to,from,next)
- 组件内的钩子
- 单独路由独享组件
</code></pre></div><h3 id="_13-vue路由传参"><a href="#_13-vue路由传参" class="header-anchor">#</a> 13.vue路由传参</h3> <blockquote><p>使用query方法传入的参数使用this.$route.query接受
使用params方式传入的参数使用this.$route.params接受</p></blockquote> <h3 id="_14-router和route的区别"><a href="#_14-router和route的区别" class="header-anchor">#</a> 14.router和route的区别</h3> <blockquote><p><strong>route</strong> 为当前router跳转对象里面可以获取name、path、query、params等
<strong>router</strong> 为VueRouter实例，想要导航到不同URL，则使用router.push方法</p></blockquote> <h3 id="_15-vue两大核心"><a href="#_15-vue两大核心" class="header-anchor">#</a> 15.Vue两大核心</h3> <ol><li>数据驱动</li> <li>组件化</li></ol> <h2 id="网络"><a href="#网络" class="header-anchor">#</a> 网络</h2> <h3 id="_1-http1-http2-https、常见的http状态码；"><a href="#_1-http1-http2-https、常见的http状态码；" class="header-anchor">#</a> 1.HTTP1, HTTP2, HTTPS、常见的http状态码；</h3> <ol><li><p>2** 开头 （请求成功）表示成功处理了请求的状态代码。</p> <ul><li>200 （成功） 服务器已成功处理了请求。 通常，这表示服务器提供了请求的网页。</li> <li>201 （已创建） 请求成功并且服务器创建了新的资源。</li> <li>202 （已接受） 服务器已接受请求，但尚未处理。</li> <li>203 （非授权信息） 服务器已成功处理了请求，但返回的信息可能来自另一来源。</li> <li>204 （无内容） 服务器成功处理了请求，但没有返回任何内容。</li> <li>205 （重置内容） 服务器成功处理了请求，但没有返回任何内容。</li> <li>206 （部分内容） 服务器成功处理了部分 GET 请求。</li></ul></li> <li><p>3** 开头 （请求被重定向）表示要完成请求，需要进一步操作。 通常，这些状态代码用来重定向。</p> <ul><li>300 （多种选择） 针对请求，服务器可执行多种操作。 服务器可根据请求者 (user agent) 选择一项操作，或提供操作列表供请求者选择。</li> <li>301 （永久移动） 请求的网页已永久移动到新位置。 服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。</li> <li>302 （临时移动） 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。</li> <li>303 （查看其他位置） 请求者应当对不同的位置使用单独的 GET 请求来检索响应时，服务器返回此代码。</li> <li>304 （未修改） 自从上次请求后，请求的网页未修改过。 服务器返回此响应时，不会返回网页内容。</li> <li>305 （使用代理） 请求者只能使用代理访问请求的网页。 如果服务器返回此响应，还表示请求者应使用代理。</li> <li>307 （临时重定向） 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。</li></ul></li> <li><p>4**开头 （请求错误）这些状态代码表示请求可能出错，妨碍了服务器的处理。</p> <ul><li>400 （错误请求） 服务器不理解请求的语法。</li> <li>401 （未授权） 请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。</li> <li>403 （禁止） 服务器拒绝请求。</li> <li>404 （未找到） 服务器找不到请求的网页。</li> <li>405 （方法禁用） 禁用请求中指定的方法。</li> <li>406 （不接受） 无法使用请求的内容特性响应请求的网页。</li> <li>407 （需要代理授权） 此状态代码与 401（未授权）类似，但指定请求者应当授权使用代理。</li> <li>408 （请求超时） 服务器等候请求时发生超时。</li> <li>409 （冲突） 服务器在完成请求时发生冲突。 服务器必须在响应中包含有关冲突的信息。</li> <li>410 （已删除） 如果请求的资源已永久删除，服务器就会返回此响应。</li> <li>411 （需要有效长度） 服务器不接受不含有效内容长度标头字段的请求。</li> <li>412 （未满足前提条件） 服务器未满足请求者在请求中设置的其中一个前提条件。</li> <li>413 （请求实体过大） 服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。</li> <li>414 （请求的 URI 过长） 请求的 URI（通常为网址）过长，服务器无法处理。</li> <li>415 （不支持的媒体类型） 请求的格式不受请求页面的支持。</li> <li>416 （请求范围不符合要求） 如果页面无法提供请求的范围，则服务器会返回此状态代码。</li> <li>417 （未满足期望值） 服务器未满足&quot;期望&quot;请求标头字段的要求。</li></ul></li> <li><p>5**开头（服务器错误）这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误，而不是请求出错。</p> <ul><li>500 （服务器内部错误） 服务器遇到错误，无法完成请求。</li> <li>501 （尚未实施） 服务器不具备完成请求的功能。 例如，服务器无法识别请求方法时可能会返回此代码。</li> <li>502 （错误网关） 服务器作为网关或代理，从上游服务器收到无效响应。</li> <li>503 （服务不可用） 服务器目前无法使用（由于超载或停机维护）。 通常，这只是暂时状态。</li> <li>504 （网关超时） 服务器作为网关或代理，但是没有及时从上游服务器收到请求。</li> <li>505 （HTTP 版本不受支持） 服务器不支持请求中所用的 HTTP 协议版本。</li></ul></li></ol> <h3 id="_2-浏览从输入网址到回车发生了什么；"><a href="#_2-浏览从输入网址到回车发生了什么；" class="header-anchor">#</a> 2.浏览从输入网址到回车发生了什么；</h3> <ul><li>总体来说分为以下几个过程:
<ol><li>URL 解析</li> <li>DNS 解析：将域名解析成 IP 地址</li> <li>TCP 连接：TCP 三次握手</li> <li>发送 HTTP 请求</li> <li>服务器处理请求并响应 HTTP 报文</li> <li>浏览器解析渲染页面</li> <li>断开连接：TCP 四次挥手</li></ol></li></ul> <h3 id="_3-前端安全（csrf、xss）"><a href="#_3-前端安全（csrf、xss）" class="header-anchor">#</a> 3.前端安全（CSRF、XSS）</h3> <h3 id="_4-前端跨域、浏览器缓存、cookie-session-token-localstorage-sessionstorage；"><a href="#_4-前端跨域、浏览器缓存、cookie-session-token-localstorage-sessionstorage；" class="header-anchor">#</a> 4.前端跨域、浏览器缓存、cookie, session, token, localstorage, sessionstorage；</h3> <h3 id="_5-tcp连接-三次握手-四次挥手"><a href="#_5-tcp连接-三次握手-四次挥手" class="header-anchor">#</a> 5.TCP连接(三次握手, 四次挥手)</h3></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"></div></div>
    <script src="/vv/assets/js/app.ae00cca3.js" defer></script><script src="/vv/assets/js/2.5eb07d41.js" defer></script><script src="/vv/assets/js/8.6d0594c7.js" defer></script>
  </body>
</html>
